<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page import="triperest.*" %>
<%@ page import="java.util.ArrayList" %>
<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
<html>
  <head>
    <%@ include file="head.jsp" %>
    <script src="js/edit.js" type="text/javascript"></script>
    <script src="http://www.google.com/jsapi?key=AIzaSyACn3EhFbyzbl9AnDRFPu9m1Ldgu7ZEvbc" type="text/javascript"></script>
    <script src="js/localsearch.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/geo.js" charset="utf-8"></script>
    <script type="text/javascript">
	    function geoSuccessCallback(p) {
			if(typeof p.address.region != 'undefined' && $('input[name=start]').val()=='') {
				if(typeof p.address.city != 'undefined')
					$('input[name=start]').val(p.address.city+', '+p.address.region).change();
				else
					$('input[name=start]').val(p.address.region).change();
			}
		}
		
		function geoErrorCallback(p) {
			alert(p.message);
		}
		
		$(document).ready(function() {
			
			//if(navigator.userAgent.match(/iPhone/i) && typeof $('span#gps').html() != 'undefined')
			if(typeof geo_position_js != 'undefined' && $('input[name=start]').val()=='' && geo_position_js.init()){		
				geo_position_js.getCurrentPosition(geoSuccessCallback, geoErrorCallback, {enableHighAccuracy:true});
			}
		});
    </script>
  </head>

  <body>
  <%@ include file="header.jsp" %>
  <input id="tripId" type="hidden" value="<%= request.getParameter("trip") %>">
  <% 
  Trip trip = new Trip(Long.valueOf(request.getParameter("trip")));
  ArrayList<Destination> destinations = trip.getDestinations();;
  %>

    <div class="clear"></div>
    <div class="tripInfo">
	    <div class="tripPic lfloat"><img class="imgSoon" src="img/icons/img_soon.png"><!--<img src="img/camping.jpg">--><img class="addPlus" src="img/icons/add_plus.png"></div>
	    	<input id="tripName" param="name" class="tripName" value="<%= trip.getName() %>">
	    	<br />
	    	<input id="tripDescription" param="description" class="tripDescription" value="<%= trip.getDescription() != null ? trip.getDescription() : "Add Description" %>">
    </div>
    <div class="clear"></div>
    <div id="tripForm">
	<ul>
		<li class="divLine">
		<label><h4 class="startText">Where does your trip start?</h4></label>
    	<input class="lrgInput" type="text" id="start" name="start" value="<%= (destinations.size() > 0) ? destinations.get(0).getName() : "" %>">
    	<a href="#"><img id="loadStart" src="img/icons/add_32.png" class="inputImg" value=""></a>
    	</li>
	    <li>
	    <label>
	    <h4 class="startText lfloat">Add Waypoint</h4><a class="smallLink lfloat" id="tooltip_waypointBtn"> &rarr; What's a waypoint?<span id="tooltip_waypoint" class="tooltip hide">A <em>waypoint</em> is a stopping place on a journey.</span></a></label>
	    
	    <div class="clear"></div>
	    <input class="lrgInput" type="text" id="waypoint" value="">
	    <a href="#"><img class="inputImg" src="img/icons/add_32.png" id="addWaypoint" value=""></li></a>
	    
	    <div id="waypoints">

	      <ul id="sortWaypoints">

	    <% 
	    int j = 0;
	    for(int i = 1; i < destinations.size(); i++){ %>

		  <input type="hidden" id="address<%= j%>" value="<%= destinations.get(i).getName()%>">
		  <input type="hidden" name="destcounts" value="<%= destinations.size()-1%>" id="destcounts">
	      <li><span><%= destinations.get(i).getName() %></span><img class="remove removeWaypoint" id="removeWaypoint<%= destinations.get(i).getID() %>" src="/img/icons/close_32.png" value="remove" />
	      	<ul class="suggestList">
	      		<li>
		      		<ul id="suggestList">
		      			<li><img src="img/icons/add_16.png">	
		      				<a href="#" onclick="googlesearch('<%= j%>');return false;">We can suggest things to do</a>
		      			</li>
		      		</ul>
	      		</li>
	      		<li>added item</li>
	      		<li>added item</li>
	      	</ul>
	      	<ul class="poiList">
	      		<li>
	      			<div id="googleversion<%= j%>" class="localexample hide">

					    <div id="searchcontrol<%= j%>" style="">Loading...</div>
					    <ul id="searchresults<%= j%>"></ul>
					</div>
	      		</li>
	      	</ul>
	      </li>
	    <%  j = j +2; } %>

	    </ul>
	    </div>
	    
	    
	    <li class="divLine">
			<label><h4 class="startText">Where does your trip end?</h4></label>
	    	<input class="lrgInput" type="text" id="start" name="start" value="<%= (destinations.size() > 0) ? destinations.get(0).getName() : "" %>">
	    	<a href="#"><img id="loadStart" src="img/icons/add_32.png" class="inputImg" value=""></a>
    	</li>
	    
	    <li class="textCenter bottomGap"><input class="button saveTripBtn" type="button" id="directions" value="Save Trip"></li>
	 </ul>
	</div>
	<div id="map">
		<div id="trip-slides">
				    <div id="map_canvas"></div>
		</div>
	</div>
	<%@ include file="footer.jsp" %>
  </body>
</html>
